<template>
  <div class="userinfo-box">
    <van-sticky>
      <div class="topss">
        <div class="left">
          <img src="" alt="" />
          <span>别瞎掰丶</span>
        </div>
        <div class="right">
          <p>会员码</p>
          <span class="iconfont icon-huiyuanmax"></span>
          <router-link to="/install">
            <span class="iconfont icon-shezhi"></span>
          </router-link>
          <router-link to="/Goods/Information">
            <span class="iconfont icon-xiaoxi">
              <van-badge content="" class="hint" />
            </span>
          </router-link>
        </div>
      </div>
    </van-sticky>
    <div class="user">
      <!-- <img src="../../assets/img/touxiang.jpg" alt="" /> -->
      <img :src="img" alt="" class="imgs" />
      <div class="user-details">
        <span v-show="haves">{{ name }}</span>
        <router-link to="/enter" class="login">
          <span v-show="havess">登录/注册 ></span>
        </router-link>
        <div>
          <p v-show="haves">{{ ID }}</p>
          <p v-show="haves">{{ badge }}</p>
        </div>
      </div>
    </div>
    <div class="gold">
      <div>
        <p>{{ pameter }}</p>
        <span>米金</span>
      </div>
      <div>
        <p>{{ discounts }}</p>
        <span>优惠卷</span>
      </div>
      <div>
        <p>
          {{ bag }}<span class="money">{{ money1 }}</span>
        </p>
        <span>红包</span>
      </div>
      <div>
        <p>
          {{ limit }}<span class="money">{{ money2 }}</span>
        </p>
        <span>最高额度</span>
      </div>
      <div>
        <p class="iconfont icon-qianbao01"></p>
        <span>钱包</span>
      </div>
    </div>
    <div class="vips">
      <div class="vips-details">
        <div class="one">
          <div class="left">
            <span class="iconfont icon-huiyuan"></span>
            <p>{{ member }}</p>
          </div>
          <div class="right">></div>
        </div>
        <div class="two">
          <div class="left">
            <div class="star">
              <p>米金星球</p>
              <span>做任务得米金</span>
            </div>
            <img src="../../assets/img/001.jpg" alt="" />
          </div>
          <div class="right">
            <div class="star">
              <p>米金商城</p>
              <span>买前先兑券</span>
            </div>
            <img src="../../assets/img/002.jpg" alt="" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Sticky } from "vant";
import $ from "jquery";
Vue.use(Sticky);
import axios from "axios";
export default {
  name: "userinfo",
  data() {
    return {
      name: "",
      pameter: "-",
      discounts: "-",
      bag: "-",
      limit: "-",
      ID: "",
      badge: "",
      member: "新用户登录领新人礼包,享更多福利",
      haves: false,
      havess: true,
      img: "/img/touxiang.jpg",
      money1: "",
      money2: "",
    };
  },
  methods: {},
  created() {
    axios({
      url: "http://localhost:3000/user?tel=" + localStorage.getItem("tel"),
      method: "get",
      params: {
        type: this.type,
      },
    }).then((res) => {
      // console.log(res.data);
      if (localStorage.getItem("tel") == res.data[0].tel) {
        this.haves = true;
        this.havess = false;
        this.money1 = "元";
        this.money2 = "万元";
        console.log(res);
        this.name = res.data[0].username;
        this.pameter = res.data[0].pameter;
        this.discounts = res.data[0].discounts;
        this.bag = res.data[0].bag;
        this.limit = res.data[0].limit;
        this.ID = res.data[0].ID;
        this.badge = res.data[0].badge;
        this.member = res.data[0].member;
        this.img = res.data[0].img;
      }
    });
  },
};
$(document).scroll(() => {
  let scroH = $(document).scrollTop(); //滚动高度
  let viewH = $(window).height(); //可见高度
  let contentH = $(document).height(); //内容高度
  if (scroH < 100) {
    $(".topss").css({
      backgroundColor: "#eaeaea",
      border: "0",
    });
  }
  if (scroH > 100) {
    $(".topss").css({
      backgroundColor: "white",
      borderBottom: ".01rem solid #ddd",
    });
  }
});
</script>

<style scoped>
@import url(../../assets/xiaomi-iconfont/iconfont.css);
.hint {
  position: absolute;
  top: 0;
  left: 0.18rem;
}
.gold div .icon-qianbao01 {
  font-size: 0.21rem;
  font-weight: 580;
}
.topss {
  height: 0.44rem;
  padding: 0 0.18rem;
  box-sizing: border-box;
  font-size: 0.14rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* border-bottom: 1px solid #e0e0e0; */
}
.topss .left {
  font-size: 0.14rem;
  display: flex;
  opacity: 0;
}
.topss .left img {
  width: 0.25rem;
  height: 0.25rem;
  border-radius: 50%;
  margin-right: 0.08rem;
}
.topss .right {
  display: flex;
  align-items: center;
}
.topss .right p {
  font-size: 0.11rem;
  margin-right: 0.09rem;
}
.topss .right .iconfont {
  font-size: 0.18rem;
  margin-right: 0.18rem;
  color: #181818;
  font-weight: 700;
}
.top .right .icon-shezhi {
  font-size: 0.2rem;
}
.topss .right .icon-xiaoxi {
  line-height: 6.1rem;
  font-size: 0.3rem;
  margin-right: 0;
}
.user {
  padding: 0 0.2rem;
  box-sizing: border-box;
  display: flex;
}
.user img {
  width: 0.48rem;
  height: 0.48rem;
  border-radius: 50%;
  margin-right: 0.14rem;
}
.user .user-details span {
  font-size: 0.16rem;
}
.user .user-details {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.user .user-details .login {
  /* height: 100; */
  justify-self: flex-end;
}
.user .user-details div {
  display: flex;
}
.user .user-details div p {
  height: 0.16rem;
  border-radius: 0.16rem;
  background: #e3e3e3;
  padding: 0 0.06rem;
  margin-right: 0.05rem;
  font-size: 0.14rem;
}
.gold {
  margin-top: 0.26rem;
  padding: 0 0.22rem;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
}
.gold div {
  height: 0.36rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.gold div p {
  font-size: 0.14rem;
  font-weight: 500;
}
.gold div .iconfont {
  color: #181818;

  font-weight: 600;
}
.gold div p .money {
  color: #181818;
}
.gold div span {
  color: #858585;
  font-size: 0.11rem;
}
.vips {
  height: 1.12rem;
  padding: 0 0.12rem;
  margin-top: 0.1rem;
}
.vips .vips-details {
  height: 100%;
  background: #f68e37;
  border-radius: 0.05rem;
  padding: 0 0.08rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}
.vips .vips-details .one {
  display: flex;
  justify-content: space-between;
  padding: 0 0.13rem;
}
.vips .vips-details .one .left {
  display: flex;
}
.vips .vips-details .one .left p {
  font-size: 0.14rem;
}
.vips .vips-details .one .left span {
  margin-right: 0.07rem;
}
.vips .vips-details .two {
  display: flex;
  justify-content: space-between;
}
.vips .vips-details .two div {
  padding: 0 0.1rem;
  box-sizing: border-box;
  width: 1.63rem;
  height: 0.68rem;
  border-radius: 0.05rem;
  background: #fff;
  display: flex;
  align-items: center;
}
.vips .vips-details .two div .star {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.vips .vips-details .two div .star p {
  font-weight: 600;
}
.vips .vips-details .two div .star span {
  font-size: 0.11rem;
  color: #e06947;
  margin-top: 0.05rem;
}
.vips .vips-details .two div img {
  width: 0.41rem;
  height: 0.41rem;
}
</style>
